<template>
  <div ref="lineRaceRef" :style="{width: '1000px',height: '600px'}"></div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, shallowRef, watch, nextTick} from 'vue';
import {ECharts, init, util} from "echarts";
import {useThemeConfig} from "/@/stores/themeConfig";
import {storeToRefs} from "pinia";
import theme from "/@/components/chart/theme";
import LineRaceData from "/@/components/chart/lineRace";

export default defineComponent({
  name: 'LineRaceRef',
  props: {
    data: {
      type: String,
      default: () => 'wangeditor',
    },
  },
  setup(props, {emit}) {
    const lineRaceRef = ref<HTMLElement>();
    const echartInstance = shallowRef<ECharts>();
    const storesThemeConfig = useThemeConfig();
    const {themeConfig} = storeToRefs(storesThemeConfig);
    const state = reactive({
      theme: '',
      bgColor: 'transparent',
      titleColor: '#303133',
    });
    watch(() => themeConfig.value.isCollapse,
        (newVal) => {
          nextTick(() => {
            setTimeout(() => {
              initLineChart();
            }, 500);
          });
        },
        {
          deep: true,
          immediate: true,
        })
    onMounted(() => {
      setTimeout(() => {
        initLineChart();
      }, 500);
    });
    const initLineChart = () => {
      if (echartInstance.value) echartInstance.value.dispose();
      const countries = [
        'Finland',
        'France',
        'Germany',
        'Iceland',
        'Norway',
        'Poland',
        'Russia',
        'United Kingdom'
      ];
      const datasetWithFilters: echarts.DatasetComponentOption[] = [];
      const seriesList: echarts.SeriesOption[] = [];

      util.each(countries, function (country) {
        var datasetId = 'dataset_' + country;
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: 'dataset_raw',
          transform: {
            type: 'filter',
            config: {
              and: [
                { dimension: 'Year', gte: 1950 },
                { dimension: 'Country', '=': country }
              ]
            }
          }
        });
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: false,
          name: country,
          endLabel: {
            show: true,
            formatter: function (params: any) {
              return params.value[3] + ': ' + params.value[0];
            }
          },
          labelLayout: {
            moveOverlap: 'shiftY'
          },
          emphasis: {
            focus: 'series'
          },
          encode: {
            x: 'Year',
            y: 'Income',
            label: ['Country', 'Income'],
            itemName: 'Year',
            tooltip: ['Income']
          }
        });
      });

      echartInstance.value = init(lineRaceRef.value, state.theme);
      const option = {
        animationDuration: 10000,
        color: theme.colors2,
        dataset: [
          {
            id: 'dataset_raw',
            source: LineRaceData
          },
          ...datasetWithFilters
        ],
        title: {
          text: 'Income of Germany and France since 1950'
        },
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          name: 'Income'
        },
        grid: {
          right: 140
        },
        series: seriesList
      };
      echartInstance.value.setOption(option);
      window.addEventListener('resize', () => {
        echartInstance.value && echartInstance.value.resize()
      });
    };
    return {
      themeConfig,
      echartInstance,
      lineRaceRef,
      ...toRefs(state),
    };
  },
});
</script>
